<template>
	<div class="pages">
		<div class="container">
			<router-view />
		</div>
		<!-- 底部导航 -->
		<van-tabbar placeholder v-model="state.tabbar.active">
			<van-tabbar-item replace :to="tab.to" v-for="(tab, idx) in state.tabbar.tabs" :icon="tab.icon"
				:badge="tab.bagde == 0 ? '' : tab.bagde">
				{{ tab.name }}
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script lang="ts" setup>
import { reactive, watch, computed } from 'vue'
import { getToken as getSession } from '@/utils/auth'

import { useRouter } from 'vue-router'

const state = reactive({
	tabbar: {
		active: 0,
		tabs: [{
			name: '首页',
			icon: 'wap-home-o',
			to: '/index/total-preview',
			bagde: 0,
		}, {
			name: '待办',
			icon: 'coupon-o',
			to: '/index/todo',
			bagde: 0,
		}, {
			name: '工作台',
			icon: 'desktop-o',
			to: '/workbench',
			bagde: 0,
		}, {
			name: '我的',
			icon: 'user-o',
			to: '/user',
			bagde: 0,
		}] as any
	}
})

state.tabbar.tabs[0].to = computed((): string => {
	const roles = [{
		code: 0,
		name: '机构用户',
		to: '/index/total-preview'
	}, {
		code: 1,
		name: '企业用户',
		to: '/index/platform'
	}]
	const role: any = roles.find((item: any) => {
      return item.code == getSession('user').userType
    })
	return role.to
})

const router = useRouter()

watch(() => router.currentRoute.value.path, (path) => {
	state.tabbar.active = state.tabbar.tabs.findIndex((item:any) => {
		return item.to === path;
	});
}, { immediate: true })

</script>
<style lang="scss" scoped>
.pages {
	height: 100%;
	display: flex;
	flex-direction: column;

	.container {
		flex: 1;
		height: 0;
		overflow-y: scroll;
	}

	&:deep(.van-tabbar__placeholder) {
		// margin-top: 12px;
	}
}
</style>